<script lang="ts" setup>
import type { ConsumptionRecordsApi } from '#/api/spa/consumption-records';
import type { Rule } from 'ant-design-vue/es/form';

import { useVbenModal } from '@vben/common-ui';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from '#/components/upload';
import {
  message,
  Tabs,
  Form,
  Input,
  Textarea,
  Select,
  RadioGroup,
  Radio,
  CheckboxGroup,
  Checkbox,
  DatePicker,
  TreeSelect,
} from 'ant-design-vue';

import { computed, ref } from 'vue';
import { $t } from '#/locales';
import {
  getConsumptionRecords,
  createConsumptionRecords,
  updateConsumptionRecords,
} from '#/api/spa/consumption-records';

const emit = defineEmits(['success']);

const formRef = ref();
const formData = ref<Partial<ConsumptionRecordsApi.ConsumptionRecords>>({
  id: undefined,
  handCardId: undefined,
  memberId: undefined,
  roomNumber: undefined,
  serviceType: undefined,
  serviceName: undefined,
  quantity: undefined,
  unitPrice: undefined,
  totalAmount: undefined,
  discountAmount: undefined,
  actualAmount: undefined,
  technicianId: undefined,
  consumptionTime: undefined,
  status: undefined,
  paymentMethod: undefined,
  remarks: undefined,
});
const rules: Record<string, Rule[]> = {
  handCardId: [{ required: true, message: '手牌ID不能为空', trigger: 'blur' }],
  serviceType: [
    { required: true, message: '服务类型不能为空', trigger: 'change' },
  ],
  serviceName: [
    { required: true, message: '服务名称不能为空', trigger: 'blur' },
  ],
  quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
  unitPrice: [{ required: true, message: '单价不能为空', trigger: 'blur' }],
  totalAmount: [{ required: true, message: '总金额不能为空', trigger: 'blur' }],
  actualAmount: [
    { required: true, message: '实收金额不能为空', trigger: 'blur' },
  ],
  consumptionTime: [
    { required: true, message: '消费时间不能为空', trigger: 'blur' },
  ],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
};
const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['消费记录'])
    : $t('ui.actionTitle.create', ['消费记录']);
});

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    handCardId: undefined,
    memberId: undefined,
    roomNumber: undefined,
    serviceType: undefined,
    serviceName: undefined,
    quantity: undefined,
    unitPrice: undefined,
    totalAmount: undefined,
    discountAmount: undefined,
    actualAmount: undefined,
    technicianId: undefined,
    consumptionTime: undefined,
    status: undefined,
    paymentMethod: undefined,
    remarks: undefined,
  };
  formRef.value?.resetFields();
};

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    await formRef.value?.validate();
    modalApi.lock();
    // 提交表单
    const data = formData.value as ConsumptionRecordsApi.ConsumptionRecords;
    try {
      await (formData.value?.id
        ? updateConsumptionRecords(data)
        : createConsumptionRecords(data));
      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success({
        content: $t('ui.actionMessage.operationSuccess'),
        key: 'action_process_msg',
      });
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      resetForm();
      return;
    }
    // 加载数据
    let data = modalApi.getData<ConsumptionRecordsApi.ConsumptionRecords>();
    if (!data) {
      return;
    }
    if (data.id) {
      modalApi.lock();
      try {
        data = await getConsumptionRecords(data.id);
      } finally {
        modalApi.unlock();
      }
    }
    formData.value = data;
  },
});
</script>

<template>
  <Modal :title="getTitle">
    <Form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
    >
      <Form.Item label="手牌ID" name="handCardId">
        <Input v-model:value="formData.handCardId" placeholder="请输入手牌ID" />
      </Form.Item>
      <Form.Item label="会员ID" name="memberId">
        <Input v-model:value="formData.memberId" placeholder="请输入会员ID" />
      </Form.Item>
      <Form.Item label="房间号" name="roomNumber">
        <Input v-model:value="formData.roomNumber" placeholder="请输入房间号" />
      </Form.Item>
      <Form.Item label="服务类型" name="serviceType">
        <Select
          v-model:value="formData.serviceType"
          placeholder="请选择服务类型"
        >
          <Select.Option label="请选择字典生成" value="" />
        </Select>
      </Form.Item>
      <Form.Item label="服务名称" name="serviceName">
        <Input
          v-model:value="formData.serviceName"
          placeholder="请输入服务名称"
        />
      </Form.Item>
      <Form.Item label="数量" name="quantity">
        <Input v-model:value="formData.quantity" placeholder="请输入数量" />
      </Form.Item>
      <Form.Item label="单价" name="unitPrice">
        <Input v-model:value="formData.unitPrice" placeholder="请输入单价" />
      </Form.Item>
      <Form.Item label="总金额" name="totalAmount">
        <Input
          v-model:value="formData.totalAmount"
          placeholder="请输入总金额"
        />
      </Form.Item>
      <Form.Item label="优惠金额" name="discountAmount">
        <Input
          v-model:value="formData.discountAmount"
          placeholder="请输入优惠金额"
        />
      </Form.Item>
      <Form.Item label="实收金额" name="actualAmount">
        <Input
          v-model:value="formData.actualAmount"
          placeholder="请输入实收金额"
        />
      </Form.Item>
      <Form.Item label="技师ID" name="technicianId">
        <Input
          v-model:value="formData.technicianId"
          placeholder="请输入技师ID"
        />
      </Form.Item>
      <Form.Item label="消费时间" name="consumptionTime">
        <DatePicker
          v-model:value="formData.consumptionTime"
          valueFormat="x"
          placeholder="选择消费时间"
        />
      </Form.Item>
      <Form.Item label="状态" name="status">
        <RadioGroup v-model:value="formData.status">
          <Radio value="1">请选择字典生成</Radio>
        </RadioGroup>
      </Form.Item>
      <Form.Item label="支付方式" name="paymentMethod">
        <Input
          v-model:value="formData.paymentMethod"
          placeholder="请输入支付方式"
        />
      </Form.Item>
      <Form.Item label="备注" name="remarks">
        <Input v-model:value="formData.remarks" placeholder="请输入备注" />
      </Form.Item>
    </Form>
  </Modal>
</template>
